<template>
    <p>vuex</p>
    <p>count:{{ count }}</p>
    <p>tenTimes:{{ tenTimes }}</p>
    <button @click="updateVuexCount">修改Count</button>
    <button @click="asyncIncrement">修改count-action</button>

    <p>moduleA: countA {{ store.state.a.countA }}</p>
    <p>moduleB: countB {{ store.state.b.countB }}</p>
    <p>moduleA: doubleCountA{{ store.getters.doubleCountA }}</p>
    <p>moduleB: doubleCountB{{ store.getters['b/doubleCountB'] }}</p>

    <button @click="moduleincrementA">模块A-mutation-触发</button>
    <button @click="moduleincrementB">模块B-mutation-触发</button>

    <button @click="moduleAsyncIncrementA">模块A-mutation-触发</button>
    <button @click="moduleAsyncIncrementB">模块B-mutation-触发</button>

    <button @click="moduleemitGlobaMut">模块B出发全局-mut</button>
    <button @click="moduleemitGlobaAct">模块B出发全局-act</button>
</template>

<script setup>
import {computed} from 'vue'
import {useStore} from 'vuex'

//获得Vuex实例化对象
const store = useStore()

const count = computed(()=>store.state.count)
const tenTimes = computed(() => store.getters.tenTimes)

const updateVuexCount = () => {
    store.commit("increment",{count:20})
}
//使用action
const asyncIncrement = () => store.dispatch('asyncIncrement',{count:30})

//mutations
const moduleincrementA=()=>{
    store.commit('incrementA')
}

const moduleincrementB=()=>{
    store.commit('b/incrementB')
}

//actions
const moduleAsyncIncrementA = () =>{
    store.dispatch('asyncIncrementA')
}
const moduleAsyncIncrementB = () =>{
    store.dispatch('b/asyncIncrementB')
}


const moduleemitGlobaMut = () =>{
    store.dispatch('b/emitGlobaMut')
}

const moduleemitGlobaAct = () =>{
    console.log('111');
    store.dispatch('b/emitGlobaAct')
}
</script>